<template>
	<!-- 页面的整体盒子 -->
	<div class="reg-container">
		<img
			src="../../assets/images/注册页图片.png"
			class="img-responsive"
			alt="Image"
		/>
		<!-- 注册的盒子 -->
		<div class="reg-box">
			<!-- 标题的盒子 -->
			<div class="title-box"></div>
			<!-- 注册的表单区域  注意不要写在标题盒子里了-->
			<el-form ref="form" :model="form" :rules="rulesObj">
				<el-form-item prop="username">
					<el-input
						placeholder="请输入用户名"
						v-model="form.username"
					></el-input>
				</el-form-item>
				<el-form-item prop="password">
					<el-input
						type="password"
						placeholder="请输入密码"
						v-model="form.password"
					></el-input>
				</el-form-item>
				<el-form-item prop="repassword">
					<el-input
						type="password"
						placeholder="请再次确认密码"
						v-model="form.repassword"
					></el-input>
				</el-form-item>
				<el-form-item>
					<el-button class="reg-btn" type="primary" @click="registerFn">
						注册
					</el-button>
					<el-link type="info" @click="$router.push('/login')">去登录</el-link>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	// 经验:
	// 前端绑定数据对象属性名，可以直接给要调用的功能接口的参数名一致
	// 好处:我可以直接把前端对象(带着同名的属性和前端的值)发给后台1
	import { registerAPI } from '@/api'
	export default {
		name: 'my-register',
		data() {
			// 注意：必须在data函数里定义此箭头函数，才能确保this.form使用
			const samePwdFn = (rule, value, callback) => {
				if (value !== this.form.password) {
					callback(new Error('两次输入密码不一致！'))
				} else {
					callback()
				}
			}
			return {
				form: {
					// 表单数据对象
					username: '',
					password: '',
					repassword: '',
				},
				rulesObj: {
					// 表单规则校验对象
					username: [
						{ required: true, message: '请输入用户名', trigger: 'blur' },
						{
							pattern: /^[a-zA-Z0-9]{1,10}$/,
							message: '用户名必须是1-10的大小写字母数字',
							trigger: 'blur',
						},
					],
					password: [
						{ required: true, message: '请输入密码', trigger: 'blur' },
						{
							pattern: /^\S{6,15}$/,
							message: '密码必须是6-15的非空字符',
							trigger: 'blur',
						},
					],
					repassword: [
						{ required: true, message: '请再次输入密码', trigger: 'blur' },
						{
							pattern: /^\S{6,15}$/,
							message: '密码必须是6-15的非空字符',
							trigger: 'blur',
						},
						{ validator: samePwdFn, trigger: 'blur' },
					],
				},
			}
		},
		methods: {
			registerFn() {
				// js兜底校验
				this.$refs.form.validate(async (valid) => {
					if (valid) {
						// 通过校验
						// console.log(this.form)
						// 1. 调用注册接口
						// 解构赋值 把axios返回的数据对象里data字段对应的值保存在res上
						const { data: res } = await registerAPI(this.form)
						console.log(res)
						// 2. 注册失败，提示用户
						// $message是elementUI在vue上添加的弹窗提示
						if (res.code !== 0) return this.$message.error(res.message)
						// 3. 注册成功，提示用户
						this.$message.success(res.message)
						// 4. 跳转到登录页面
						this.$router.push('/login')
					} else {
						return false // 阻止默认提交行为
					}
				})
			},
		},
	}
</script>

<style scoped>
	.reg-container {
		/* background: url('../../assets/images/login_bg.webp') center; */
		/* background-size: cover; */
		/* background: linear-gradient(to bottom, #a6c0fe 0%, #f68084 100%); */
		background-color: #fff;
		height: 100%;
	}
	.img-responsive {
		height: 400px;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.reg-box {
		/* width: 400px;
		height: 335px; */
		width: 600px;
		height: 400px;
		/* background: linear-gradient(to right, #e0c3fc 0%, #8ec5fc 100%); */
		background: linear-gradient(
			to bottom,
			rgba(64, 158, 255, 0.3),
			rgba(255, 104, 132, 0.3)
		);
		opacity: 90%;
		border-radius: 35px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		padding: 0 30px;
		box-sizing: border-box;
	}
	.title-box {
		margin-top: 30px;
		height: 60px;
		background: url('../../assets/images/login_title.png') center no-repeat;
	}
	.reg-btn {
		width: 100%;
	}
</style>
